<template>
  <div>
    <div class="top">
      <div id="components-form-demo-advanced-search">
        <a-row :gutter="24" style="margin-bottom: 15px">
          <a-col :span="6">
            <div class="label">客户编号：</div>
            <a-input :maxLength="128" v-model="searchData.tenantId" />
          </a-col>
          <a-col :span="6">
            <div class="label">转运标题：</div>
            <a-input :maxLength="128" v-model="searchData.title" />
          </a-col>

          <a-col :span="6">
            <div class="label">转出仓库：</div>
            <a-select
              show-search
              option-filter-prop="children"
              style="width: 60%"
              :filter-option="filterOption"
              v-model="searchData.warehouseId"
              allowClear
              placeholder="全部"
            >
              <a-select-option
                :value="item.warehouseId"
                v-for="item in warehouse"
                :key="item.warehouseId"
              >
                {{ item.titleName }}
              </a-select-option>
            </a-select>
          </a-col>

          <a-col :span="6" v-show="!expand">
            <span style="margin-left: 20px">
              <a-button type="primary" class="top-btn" @click="searchBtn">
                查询
              </a-button>
              <a-button
                type="primary"
                class="top-btn"
                style="margin-left: 10px"
                @click="resetBtn"
              >
                重置
              </a-button>
            </span>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </a-col>
          <a-col :span="6" v-show="expand">
            <div class="label">转运出库编号：</div>
            <a-input :maxLength="128" v-model="searchData.transferNo" />
          </a-col>
        </a-row>
        <a-row :gutter="24" v-show="expand">
          <a-col :span="6" v-show="expand">
            <div class="label">FBA ID：</div>
            <a-input :maxLength="128" v-model="searchData.fbaId" />
          </a-col>
          <a-col :span="6" v-show="expand">
            <div class="label">Reference ID：</div>
            <a-input :maxLength="128" v-model="searchData.referenceId" />
          </a-col>
          <a-col :span="6" v-show="expand">
            <div class="label">创建时间：</div>

            <a-range-picker
              style="width: 60%"
              :placeholder="['年/月/日', '年/月/日']"
              format="YYYY-MM-DD"
              :value="Datevalue"
              v-model="dateTime"
              @change="DateChange"
            />
          </a-col>
          <a-col :span="6" v-show="expand">
            <span style="margin-left: 10px">
              <a-button type="primary" class="top-btn" @click="searchBtn">
                查询
              </a-button>
              <a-button
                type="primary"
                class="top-btn"
                style="margin-left: 10px"
                @click="resetBtn"
              >
                重置
              </a-button>
            </span>
            <a
              :style="{
                marginRight: '8px',
                fontSize: '14px',
                marginLeft: '10px',
              }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </a-col>
        </a-row>
      </div>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-tabs default-active-key="3" @change="callback">
        <a-tab-pane key="3">
          <span slot="tab">
            <a-badge :count="statecount[3]" :offset="[15, 0]"
              >等待处理
            </a-badge>
          </span>
          <TransferInScanTable
            v-if="TransferOutKeys === '3'"
            :tableData="tableData"
            TransferOutKeys="等待处理"
            :getTransferOutTableList="getTransferOutTableList"
            :getStateCount="getStateCount"
            @selectedRowKeys="selectedRowKeys"
          />
        </a-tab-pane>
        <a-tab-pane key="4">
          <span slot="tab">
            <a-badge :count="statecount[4]" :offset="[15, 0]"
              >正在处理
            </a-badge>
          </span>
          <TransferInScanTable
            v-if="TransferOutKeys === '4'"
            :tableData="tableData"
            TransferOutKeys="正在处理"
            :getTransferOutTableList="getTransferOutTableList"
            :getStateCount="getStateCount"
            @selectedRowKeys="selectedRowKeys"
          />
        </a-tab-pane>
        <a-tab-pane key="5">
          <span slot="tab">
            <a-badge :count="statecount[5]" :offset="[15, 0]"
              >已转运发货
            </a-badge>
          </span>
          <TransferInScanTable
            v-if="TransferOutKeys === '5'"
            :tableData="tableData"
            TransferOutKeys="已转运发货"
            :getTransferOutTableList="getTransferOutTableList"
            :getStateCount="getStateCount"
            @selectedRowKeys="selectedRowKeys"
          />
        </a-tab-pane>
      </a-tabs>
      <!-- 分页器 -->
      <div style="margin: 20px 0; text-align: center">
        <a-config-provider :locale="locale">
          <a-pagination
            :current="searchData.current"
            show-size-changer
            :pageSizeOptions="['10', '20', '30']"
            :show-total="
              (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
            "
            @showSizeChange="showChange"
            :buildOptionText="
              (props) =>
                ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
            "
            show-quick-jumper
            :default-current="searchData.current"
            :total="total"
            @change="onChangePage"
          />
        </a-config-provider>
      </div>
    </a-spin>
    <!-- 新增模态框 -->
    <TransferInScanModal
      :getTransferOutTableList="getTransferOutTableList"
      :getStateCount="getStateCount"
      :TransferOutKeys="TransferOutKeys"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  TransferOut_tabList,
  TransferOut_statecount,
} from "@/apis/clientSide/OrderManage/TransferOut";
import TransferInScanTable from "@/components/system/OutOrder/TransferInScanTable.vue";
import TransferInScanModal from "@/components/system/OutOrder/TransferInScanModal.vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import moment from "moment";
export default {
  components: {
    TransferInScanTable,
    TransferInScanModal,
  },
  created() {
    this.getTransferOutTableList();
    this.getStateCount();
  },
  data() {
    return {
      spinning: false,
      //折叠效果
      expand: false,
      dateTime: [],
      Datevalue: [],
      url: "",
      //物流商标杆
      logisticsFlag: false,
      //复选框的值
      selectedKeys: [],
      selectedRows: [],
      // 表头状态气泡数量
      statecount: [],
      tableData: [],
      TransferOutKeys: "3",
      locale,
      total: 5,
      searchData: {
        referenceId: null,
        fbaId: null,
        title: null,
        startTime: null,
        endTime: null,
        auditState: "3",
        current: 1,
        transferNo: null,
        warehouseId: null,
        size: 10,
        tenantId: null,
      },
    };
  },
  methods: {
    disabledDate(current) {
      // Can not select days before today and today
      return (
        current && current < moment(this.searchData.startDate).endOf("day")
      );
    },
    //查询接口
    searchBtn() {
      this.getTransferOutTableList();
    },
    // 接收子传过来的复选框
    selectedRowKeys(val, selectedRows) {
      this.selectedKeys = val;
      this.selectedRows = selectedRows;
    },
    //选项卡更改
    callback(key) {
      this.searchData.current = 1;
      this.TransferOutKeys = key;
      this.searchData.auditState = key;
      this.getTransferOutTableList();
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTransferOutTableList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTransferOutTableList();
    },
    //重置按钮
    resetBtn() {
      this.searchData.tenantId = null;
      this.searchData.referenceId = null;
      this.searchData.fbaId = null;
      this.searchData.startTime = null;
      this.searchData.endTime = null;
      this.searchData.title = null;
      this.searchData.warehouseId = null;
      this.searchData.transferNo = null;
      this.dateTime = [];
      this.getTransferOutTableList();
    },
    //搜索日期选择器
    DateChange(date, dateString) {
      date;
      if (dateString && dateString.length > 0) {
        this.searchData.startTime = `${dateString[0]} 00:00:00`; //年月日后面必须要有个空格
        this.searchData.endTime = `${dateString[1]} 23:59:59`; //年月日后面必须要有个空格
      } else {
        this.searchData.startTime = "";
        this.searchData.endTime = "";
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    // 显示批量导入模态框
    showImportModal() {
      setTimeout(() => {
        this.$bus.$emit("showTransferOutImportModal", this.selectedRows);
      }, 50);
    },
    // 获取表格数据
    async getTransferOutTableList() {
      this.spinning = true;
      let { code, responseBody } = await TransferOut_tabList(
        this.searchData.auditState,
        this.searchData
      );
      if (code === "200") {
        this.spinning = false;
        this.total = responseBody.total * 1;
        let { records } = responseBody;
        this.tableData = JSON.stringify(records);
        this.tableData = JSON.parse(this.tableData);
        this.tableData.forEach((item) => {
          if (item.auditState === "1") {
            item.auditState = "待提交";
          } else if (item.auditState === "2") {
            item.auditState = "待审核";
          } else if (item.auditState === "3") {
            item.auditState = "等待处理";
          } else if (item.auditState === "4") {
            item.auditState = "正在处理";
          } else if (item.auditState === "5") {
            item.auditState = "已转运发货";
          } else if (item.auditState === "0") {
            item.auditState = "审核不通过";
          }
        });
      }
    },
    //获取表头统计
    async getStateCount() {
      let res = await TransferOut_statecount(["0", "1", "2", "3", "4", "5"]);
      this.statecount = res.responseBody;
    },
  },
  computed: {
    ...mapState(["warehouse"]),
  },
};
</script>

<style lang="less" scoped>
.action {
  span {
    margin: 0 5px 0 0;
  }
}
#components-form-demo-advanced-search {
  padding: 5px;
  input {
    width: 60%;
  }
  .ant-col {
    display: flex;
    align-items: center;
    .label {
      width: 100px;
      text-align: right;
    }
  }
}
.top-btn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.top-btn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>
